<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="searchInpt"
        placeholder="输入模版名称"
        clearable
        @keyup.enter.native="searchMessageTemplate()"
        class="search-btn"
      >
        <el-button
          @click="searchMessageTemplate()"
          icon="el-icon-search"
          :loading="searchLoading"
          slot="append"
        >搜索</el-button>
      </el-input>
      <div class="float-right">
        <el-button
          type="primary"
          @click="newMessageShow()"
          v-show="permission_roles.fetchNewYouMengTemplateData"
        >新建友盟模版</el-button>
      </div>
    </div>
    <div class="table_container">
      <el-table
        border
        v-loading="tableloading"
        :data="messageTemplateData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          property="ticker"
          label="模版名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="typeName"
          width="150"
          label="推送类型"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="title"
          label="推送标题"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="templateContext"
          width="600"
          label="推送内容"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              @click="doDeleteSMSTemplate(scope.row)"
              type="text"
              size="small"
              v-show="permission_roles.fetchDeleteYouMengTemplateData"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="新建友盟模版"
      :visible.sync="addNewMessageShow"
      width="40%"
      center
    >

      <el-form
        :model="addNewMessageData"
        :rules="newMessageRules"
        ref="addNewMessageData"
        label="100px"
      >
        <el-form-item
          label="模版名称"
          prop="ticker"
        >
          <el-input
            type="text"
            v-model="addNewMessageData.ticker"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="推送标题"
          prop="title"
        >
          <el-input
            type="text"
            v-model="addNewMessageData.title"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="推送内容"
          prop="content"
        >
          <el-input
            type="textarea"
            v-model="addNewMessageData.content"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="模版类型"
          prop=“role”
        >
          <el-radio-group v-model="addNewMessageData.pushTemplateType">
            <!-- <el-radio :label="1">优孕报告</el-radio> -->
            <el-radio :label="2">系统消息</el-radio>
            <el-radio :label="3">精选活动</el-radio>
            <!-- <el-radio :label="4">佑蜜助手</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="角色"
          prop=“role”
        >
          <el-radio-group v-model="addNewMessageData.role">
            <el-radio :label="1">客服</el-radio>
            <el-radio :label="2">运营</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="addNewMessageShow = false">取 消</el-button>
        <el-button
          type="primary"
          @click="doAddNewMessageTemplate('addNewMessageData')"
        >确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  fetchYouMengTemplateData,
  fetchSearchYouMengTemplateData,
  fetchNewYouMengTemplateData,
  fetchDeleteYouMengTemplateData,
  test
} from "@/api/other";
import { formatDateTime } from "@/utils/common";
export default {
  data() {
    return {
      count: 0,
      limit: 20,
      currentPage: 1,
      tableloading: false,
      searchInpt: "",
      searchLoading: false,
      messageTemplateData: [],
      PushTemplateData: [],
      messageTemplateActive: "1",
      addNewMessageShow: false,
      addNewMessageData: {
        title: "",
        content: "",
        ticker: "",
        role: 1,
        pushTemplateType: 1
      },
      newMessageRules: {
        title: [
          { required: true, message: "模版标题不能为空", trigger: "blur" }
        ],
        ticker: [
          { required: true, message: "模版名称不能为空", trigger: "blur" }
        ],
        content: [
          { required: true, message: "内容不能为空", trigger: "blur" },
          { min: 5, max: 139, message: "长度在5到1500个字符", trigger: "blur" }
        ],
        ticker: [
          { required: true, message: "模版名称不能为空", trigger: "blur" }
        ],
        role: [{ required: true, message: "请选择模版", trigger: "change" }]
      }
    };
  },
  created() {
    this.getAllMessageTemplateData();
  },
  render: {},
  methods: {
    async getAllMessageTemplateData() {
      this.tableloading = true;
      const message = await fetchYouMengTemplateData();
      this.messageTemplateData = [];
      this.tableloading = false;
      if (message.data) {
        message.data.forEach(item => {
          const tableData = {};
          tableData.title = item.title;
          tableData.ticker = item.ticker;
          tableData.typeName = item.typeName;
          tableData.id = item.id;
          tableData.templateContext = item.templateContext;
          this.messageTemplateData.push(tableData);
        });
      }
    },
    async searchMessageTemplate() {
      this.tableloading = true;
      const message = await fetchSearchYouMengTemplateData({
        pushTemplateName: this.searchInpt
      });
      this.messageTemplateData = [];
      this.tableloading = false;
      if (message.data) {
        message.data.forEach(item => {
          const tableData = {};
          tableData.ticker = item.ticker;
          tableData.typeName = item.typeName;
          tableData.id = item.id;
          tableData.templateContext = item.templateContext;
          this.messageTemplateData.push(tableData);
        });
      }
    },
    newMessageShow() {
      this.addNewMessageShow = true;
    },
    doAddNewMessageTemplate(addNewMessageData) {
      this.$refs[addNewMessageData].validate(valid => {
        if (valid) {
          this.addNewMessageTemplate(addNewMessageData);
        } else {
          return false;
        }
      });
    },
    async addNewMessageTemplate(addNewMessageData) {
      const newTemplate = await fetchNewYouMengTemplateData({
        pushTemplateTicker: this.addNewMessageData.ticker,
        pushTemplateTitle: this.addNewMessageData.title,
        pushTemplateContent: this.addNewMessageData.content,
        pushTemplateType: this.addNewMessageData.pushTemplateType,
        role: this.addNewMessageData.role
      });
      if (newTemplate.status == "200") {
        this.$refs[addNewMessageData].resetFields();
        this.addNewMessageShow = false;
        this.getAllMessageTemplateData();
        this.$message({
          type: "success",
          message: "添加成功!"
        });
      } else {
        this.$message({
          type: "error",
          message: "添加失败!"
        });
      }
    },
    doDeleteSMSTemplate(data) {
      this.$confirm("确认删除" + data.typeName + "模版?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteSMSTemplate(data);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async deleteSMSTemplate(data) {
      const delTemplate = await fetchDeleteYouMengTemplateData({
        pushTemplateId: data.id
      });
      if (delTemplate.status == "200") {
        this.getAllMessageTemplateData();
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      } else {
        this.$message({
          type: "error",
          message: "删除失败!"
        });
      }
    }
  },
  computed: {
    ...mapGetters(["permission_roles"])
  }
};
</script>

<style lang="less" scoped>
.last {
  text-align: right;
}
</style>
